import router from '@/router/index.js'
import store from '@/store/index.js'
// 对路由跳转做拦截
// 前置路由守卫-在页面跳转前做拦截
router.beforeEach(async(to, from, next) => {
  // to:去哪里的路由信息
  // from:从哪里来的路由信息
  // next方法:控制能跳转
  // console.log(to, from, next)
  // 运行页面跳转
  // 如果没有登录，跳转到登录页面
  // 如果登录了 允许跳转(如果页面要去的页面时登录页面，即使没有登录，也可以，不要从登录要求又跳转到登录)
  // 注意，在.vue文件当中，可以通过this.%store.user，访问数据，但是在js文件不可以通过this，this不是指向组件
  // 白名单路径，允许直接访问
  /*   if (to.path === '/login' || to.path === '/learnVuex' || to.path === '/404') {
        return next()
    } */
  // 上者简化写法
  // 允许白名单页面直接跳转
  if (['/login', '/learnVuex', '/404'].includes(to.path)) {
    return next()
  }
  // 根据token做跳转判断
  if (store.state.user.token) {
    // 允许页面跳转
    // 获取用户信息如果为空
    if (!store.state.user.userInfo.userId) {
      const { roles: { menus }} = await store.dispatch('user/getUserInfo')
      console.log(menus)
      const filterRoutes = await store.dispatch('permission/filterRoutes', menus)
      // 添加路由到路由配置当中
      router.addRoutes([
        ...filterRoutes,
        { path: '*', redirect: '/404', hidden: true }])
      // // 解决菜单显示不正常的问题
      // router.options.routes = [...constantRoutes, ...filterRoutes]
      next(to.path)
    }
    next()
  } else {
    // 跳转到登录页面
    next('/login')
  }
})
// 后置路由守卫-在页面跳转后做拦截
router.afterEach((to, from) => {

}
)
